<template>
	<div>
		<div class="content-box">
			<el-table :data="recordsList" style="width: 100%">
				<el-table-column prop="orderId" align="center" width="150" label="兑换编号" />
				<el-table-column prop="goodName" align="center" label="兑换商品" />
				<el-table-column prop="num" align="center" label="数量" />
				<el-table-column prop="time" align="center" width="140" label="兑换时间" />
				<el-table-column prop="status" align="center" label="订单状态">
					<template #default="scope">
						<span v-if="scope.row.type == '收入'" style="color: #34c758">收入</span>
						<span v-if="scope.row.type == '支出'" style="color: #ff3a30">支出</span>
					</template>
				</el-table-column>
				<el-table-column prop="points" align="center" label="使用积分" />
				<el-table-column prop="options" align="center" label="操作" width="200">
					<template #default>
						<div>
							<el-button link>查看物流</el-button>
							<el-button link type="warning">确认收货</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script setup lang="ts" name="RedemptionRecords">
const recordsList = [
	{ orderId: "DH2354235623", goodName: "商品名称", num: 2, time: "2023-04-12 16:45:39", status: "待发货", points: 20 },
	{ orderId: "DH2354235623", goodName: "商品名称", num: 2, time: "2023-04-12 16:45:39", status: "已发货", points: 20 },
	{ orderId: "DH2354235623", goodName: "商品名称", num: 2, time: "2023-04-12 16:45:39", status: "待发货", points: 20 },
	{ orderId: "DH2354235623", goodName: "商品名称", num: 2, time: "2023-04-12 16:45:39", status: "待发货", points: 20 }
];
</script>

<style scoped lang="scss">
.content-box {
	height: 796px;
	padding: 20px;
	background-color: #ffffff;
}
.el-table {
	--el-bg-color: #f3ece0;
	--el-table-header-text-color: #c39f63;
}
.el-button {
	--el-color-warning: #c39f63;
}
</style>
